<template>
	<!-- 服务详情页 -->
	<view class="serve-container">
		<!-- 服务头部信息 -->
		<view class="main-card header-card">
			<view class="service-header">
				<view class="service-title">{{ serviceData.serviceName }}</view>
				<view class="service-meta">
					<view class="service-time">发布时间：{{ formatDate(serviceData.createTime || Date.now()) }}</view>
				</view>
			</view>

			<!-- 企业信息 -->
			<view class="company-info">
				<view class="company-info-left">
					<image class="company-avatar" :src="serviceData.companyAvatar " mode="aspectFill"></image>
				</view>
				<view class="company-details">
					<view class="company-name">{{ serviceData.companyName || '遇见贵商科技有限公司' }}</view>
					<view class="company-owner"><text class="dot"></text>负责人：{{ serviceData.companyOwner || '白先国' }}
					</view>
				</view>
			</view>

			<!-- 点赞区域 -->
			<view class="like-section">
				<view class="like-btn" @click="toggleLike">
					<text class="iconfont" :class="isLiked ? 'icon-zan' : 'icon-weizan'"
						:animation="isLiked ? likeAnimation : null"></text>
					<text class="like-count">{{ likeCount }}</text>
				</view>
			</view>
		</view>

		<!-- 导航菜单 -->
		<view class="nav-menu">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index"
				:class="{'active': currentNav === index}" @click="scrollToSection(index)">
				{{keyTitle}}{{ item }}
				<view class="nav-indicator" v-if="currentNav === index"></view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="main-card content-card">
			<!-- 服务描述内容 -->
			<view class="content-section">
				<view class="content-title" id="section-0">
					<view class="title-line"></view>
					<text class="title-text">{{keyTitle}}描述</text>
					<view class="title-line"></view>
				</view>

				<view class="service-text">{{ serviceData.description || '' }}</view>

				<view class="image-gallery"
					v-if="serviceData.descriptionImages && serviceData.descriptionImages.length > 0">
					<image class="gallery-image" v-for="(img, index) in serviceData.descriptionImages" :key="index"
						:src="img" mode="widthFix" @click="previewImage(serviceData.descriptionImages, index)"></image>
				</view>
			</view>

			<!-- 服务案例内容 -->
			<view class="content-section">
				<view class="content-title" id="section-1">
					<view class="title-line"></view>
					<text class="title-text">{{keyTitle}}案例</text>
					<view class="title-line"></view>
				</view>

				<view class="service-text">{{ serviceData.cases || '' }}</view>

				<view class="image-gallery" v-if="serviceData.casesImages && serviceData.casesImages.length > 0">
					<image class="gallery-image" v-for="(img, index) in serviceData.casesImages" :key="index" :src="img"
						mode="widthFix" @click="previewImage(serviceData.casesImages, index)"></image>
				</view>
			</view>

			<!-- 服务资质内容 -->
			<view class="content-section">
				<view class="content-title" id="section-2">
					<view class="title-line"></view>
					<text class="title-text">{{keyTitle}}资质</text>
					<view class="title-line"></view>
				</view>

				<view class="service-text">{{ serviceData.qualification || '' }}</view>

				<view class="image-gallery"
					v-if="serviceData.qualificationImages && serviceData.qualificationImages.length > 0">
					<image class="gallery-image" v-for="(img, index) in serviceData.qualificationImages" :key="index"
						:src="img" mode="widthFix" @click="previewImage(serviceData.qualificationImages, index)">
					</image>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer-action">
			<view class="action-btn like-btn" @click="toggleLike">
				<text class="iconfont" :class="isLiked ? 'icon-zan' : 'icon-weizan'"
					:animation="isLiked ? likeAnimation : null"></text>
				<text>{{ isLiked ? '已点赞' : '点赞' }}</text>
			</view>
			<view class="action-btn call-btn" @click="callService">
				<text class="iconfont icon-phone"></text>
				<text>立即联系</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		configMap
	} from "@/utils";
	import {
		findServiceGetDetail,
		findServiceLike
	} from '@/api/extend.js';
	export default {
		computed: configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
		data() {
			return {
				keyTitle: '服务',
				serviceId: null,
				currentNav: 0,
				navItems: ['描述', '案例', '资质'],
				isLiked: false,
				likeCount: 0,
				likeAnimation: null,
				serviceData: {
					serviceName: '加载中...',
					description: '',
					descriptionImages: [],
					cases: '',
					casesImages: [],
					qualification: '',
					qualificationImages: [],
					createTime: Date.now(),
					phone: '10086', // 默认电话号码，实际应该从缓存数据中获取
					companyAvatar: '',
					companyName: '',
					companyOwner: ''
				}
			}
		},
		onShareAppMessage: function() {
			let that = this;
			// 检查 wx API 是否可用
			if (typeof wx !== 'undefined' && typeof wx.showShareMenu === 'function') {
				try {
					wx.showShareMenu({
						withShareTicket: true,
						menus: ['shareAppMessage', 'shareTimeline']
					});
				} catch (error) {
					console.error('显示分享菜单失败:', error);
				}
			}
			return {
				title: this.serviceData.serviceName || '',
				imageUrl: '',
				path: `/pages/extend/index/index_serve_desc?id=${that.options.id}&type=${that.options.type}`
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: this.serviceData.serviceName || '',
				query: {
					uid: this.uid || -1
				},
				imageUrl: ''
			};
		},
		onLoad(options) {
			this.options = options;
			
			if (options.id) {
				this.serviceId = options.id;
			}
			this.getServiceDetail();

			let title = '服务';
			if (options.type == 4) {
				title = '需求'
				this.keyTitle = '需求'
			}
			if (options.type == 3) {
				title = '项目'
				this.keyTitle = '项目'
			}
			if (options.type == 2) {
				title = '专家'
				this.keyTitle = '专家'
			}

			uni.setNavigationBarTitle({
				title: title + '详情'
			})

			
		},
		onReady() {
			// 初始设置为第一个导航项
			this.currentNav = 0;
		},
		methods: {
			getServiceDetail() {
				if (this.serviceId) {
					// 如果有ID，从API获取服务详情
					findServiceGetDetail({
						id: this.serviceId
					}).then(res => {
						if (res.data) {
							const item = res.data;
							// 更新页面数据
							this.serviceData = {
								serviceName: item.title || '未命名服务',
								description: item.des_content || '',
								descriptionImages: item.des_images ? item.des_images.split(',') : [],
								cases: item.case_content || '',
								casesImages: item.case_images ? item.case_images.split(',') : [],
								qualification: item.qua_content || '',
								qualificationImages: item.qua_images ? item.qua_images.split(',') : [],
								createTime: item.create_time || Date.now(),
								phone: item.card?.phone || '10086',
								companyAvatar: item.card?.avatar || '',
								companyName: item.card?.position?.company_name || '',
								companyOwner: item.card?.name || ''
							};

							// 获取点赞状态
							this.likeCount = item.like_number || 0;
							this.getLikeStatus();
						} else {
							// 如果API没有返回数据，显示提示
							uni.showToast({
								title: '未找到服务数据',
								icon: 'none'
							});
						}
					}).catch((err) => {
						uni.showToast({
							title: '获取服务详情失败',
							icon: 'none'
						});
					});
				} else {
					// 从缓存中获取服务数据
					uni.getStorage({
						key: 'serviceDraft',
						success: (res) => {
							if (res.data) {
								const draftData = res.data;

								// 更新页面数据
								this.serviceData = {
									serviceName: draftData.serviceName || '未命名服务',
									description: draftData.description || '',
									descriptionImages: draftData.descriptionImages || [],
									cases: draftData.cases || '',
									casesImages: draftData.casesImages || [],
									qualification: draftData.qualification || '',
									qualificationImages: draftData.qualificationImages || [],
									createTime: draftData.timestamp || Date.now(),
									phone: draftData.phone || '10086', // 获取电话号码，如果没有则使用默认值
									companyAvatar: draftData.companyAvatar || '',
									companyName: draftData.companyName || '',
									companyOwner: draftData.companyOwner || ''
								};

								// 更新点赞数
								this.likeCount = item.like_number || 0;
								// 获取点赞状态
								this.getLikeStatus();
							} else {
								// 如果缓存中没有数据，显示提示
								uni.showToast({
									title: '未找到服务数据',
									icon: 'none'
								});
							}
						},
						fail: () => {
							// 获取缓存失败
							uni.showToast({
								title: '未找到服务数据',
								icon: 'none'
							});
						}
					});
				}
			},

			// 获取点赞状态
			getLikeStatus() {
				// 从本地存储获取点赞状态
				const likeKey = `service_like_${this.serviceId || 'draft'}`;
				uni.getStorage({
					key: likeKey,
					success: (res) => {
						if (res.data) {
							this.isLiked = res.data.isLiked;
							this.likeCount = res.data.likeCount || 0;
						} else {
							// 默认未点赞
							this.isLiked = false;
							this.likeCount = 0;
						}
					},
					fail: () => {
						// 默认未点赞
						this.isLiked = false;
						this.likeCount = 0;
					}
				});
			},

			// 切换点赞状态
			toggleLike() {
				// 如果是草稿状态(无ID)，使用本地存储处理
				if (!this.serviceId) {
					// 切换点赞状态
					this.isLiked = !this.isLiked;

					// 更新点赞数
					if (this.isLiked) {
						this.likeCount++;
						// 添加点赞动画效果
						this.showLikeAnimation();
					} else if (this.likeCount > 0) {
						this.likeCount--;
					}

					// 保存点赞状态到本地存储
					const likeKey = `service_like_draft`;
					uni.setStorage({
						key: likeKey,
						data: {
							isLiked: this.isLiked,
							likeCount: this.likeCount
						},
						success: () => {
							// 显示点赞反馈
							uni.showToast({
								title: this.isLiked ? '点赞成功' : '已取消点赞',
								icon: 'none'
							});
						}
					});
					return;
				}

				// 有ID的情况下调用API
				findServiceLike({
					id: this.serviceId
				}).then(res => {
					if (res.status === 200) {
						// 切换点赞状态
						this.isLiked = !this.isLiked;

						// 更新点赞数
						if (this.isLiked) {
							this.likeCount++;
							// 添加点赞动画效果
							this.showLikeAnimation();
						} else if (this.likeCount > 0) {
							this.likeCount--;
						}

						// 保存点赞状态到本地存储
						const likeKey = `service_like_${this.serviceId}`;
						uni.setStorage({
							key: likeKey,
							data: {
								isLiked: this.isLiked,
								likeCount: this.likeCount
							}
						});

						// 显示点赞反馈
						uni.showToast({
							title: this.isLiked ? '点赞成功' : '已取消点赞',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg || '操作失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('点赞操作失败', err);
					uni.showToast({
						title: '点赞失败，请稍后再试',
						icon: 'none'
					});
				});
			},

			// 显示点赞动画
			showLikeAnimation() {
				// 创建动画实例
				const animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				});

				// 设置动画
				animation.scale(1.5).step();
				animation.scale(1.0).step();

				// 在页面上找到所有点赞图标，添加动画效果
				const query = uni.createSelectorQuery();
				query.selectAll('.icon-zan').boundingClientRect(data => {
					if (data && data.length > 0) {
						// 应用动画
						setTimeout(() => {
							this.$set(this, 'likeAnimation', animation.export());
						}, 50);
					}
				}).exec();
			},

			// 点击导航项滚动到对应区域
			scrollToSection(index) {
				// 更新导航状态
				this.currentNav = index;

				// 直接使用ID滚动到对应区域
				uni.pageScrollTo({
					selector: `#section-${index}`,
					offsetTop: -70, // 调整偏移量确保标题显示在正确位置
					duration: 300
				});
			},

			formatDate(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},
			previewImage(images, current) {
				uni.previewImage({
					urls: images,
					current: images[current]
				});
			},
			callService() {
				// || this.serviceData.phone
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: '4007180878',
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.serve-container {
		padding: 30rpx;
		background-color: #f7f9fc;
		min-height: 100vh;
		padding-bottom: 150rpx;
	}

	.main-card {
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 10, 60, 0.06);
		margin-bottom: 30rpx;
		padding: 40rpx;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.header-card {
		position: relative;
		overflow: visible;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 8rpx;
			background: linear-gradient(90deg, #3a7bd5, #00d2ff);
			border-radius: 8rpx 8rpx 0 0;
		}
	}

	.content-card {
		border-radius: 24rpx;
	}

	.service-header {
		.service-title {
			font-size: 40rpx;
			color: #2c3e50;
			font-weight: 600;
			margin-bottom: 16rpx;
			letter-spacing: 1rpx;
		}

		.service-meta {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.service-time {
				font-size: 24rpx;
				color: #94a3b8;
			}
		}
	}

	.company-info {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		padding: 24rpx;
		background-color: #f8fafd;
		border-radius: 16rpx;
		position: relative;
		border-left: 4rpx solid #3a7bd5;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 6rpx 20rpx rgba(0, 10, 60, 0.05);
		}

		.company-info-left {
			margin-right: 24rpx;
		}

		.company-avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			box-shadow: 0 4rpx 12rpx rgba(0, 10, 60, 0.1);
		}

		.company-details {
			flex: 1;

			.company-name {
				font-size: 32rpx;
				color: #2c3e50;
				font-weight: 600;
				margin-bottom: 12rpx;
				letter-spacing: 0.5rpx;
			}

			.company-owner {
				font-size: 26rpx;
				color: #64748b;
				display: flex;
				align-items: center;

				.dot {
					display: inline-block;
					width: 6rpx;
					height: 6rpx;
					background-color: #3a7bd5;
					border-radius: 50%;
					margin-right: 12rpx;
				}
			}
		}
	}

	// 点赞区域样式
	.like-section {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;

		.like-btn {
			display: flex;
			align-items: center;
			background-color: #f8fafd;
			padding: 12rpx 30rpx;
			border-radius: 40rpx;
			box-shadow: 0 6rpx 16rpx rgba(0, 10, 60, 0.08);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			.iconfont {
				font-size: 36rpx;
				margin-right: 12rpx;

				&.icon-weizan {
					color: #94a3b8;
				}

				&.icon-zan {
					color: #ff4757;
				}
			}

			.like-count {
				font-size: 28rpx;
				color: #64748b;
				font-weight: 500;
			}
		}
	}

	// 导航菜单样式
	.nav-menu {
		display: flex;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 10, 60, 0.08);
		position: sticky;
		top: 0;
		z-index: 10;
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
	}

	.nav-item {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #64748b;
		position: relative;
		transition: all 0.3s;
		font-weight: 500;

		&.active {
			color: #3a7bd5;
			font-weight: 600;
		}

		.nav-indicator {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40rpx;
			height: 4rpx;
			background: linear-gradient(90deg, #3a7bd5, #00d2ff);
			border-radius: 2rpx;
		}
	}

	.content-section {
		margin-bottom: 60rpx;
		scroll-margin-top: 130rpx;

		&:last-child {
			margin-bottom: 20rpx;
		}
	}

	.content-title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;

		.title-line {
			width: 60rpx;
			height: 2rpx;
			background-color: #e2e8f0;
		}

		.title-text {
			font-size: 34rpx;
			color: #2c3e50;
			margin: 0 24rpx;
			font-weight: 600;
			letter-spacing: 1rpx;
		}
	}

	.service-text {
		font-size: 28rpx;
		color: #475569;
		line-height: 1.8;
		margin-bottom: 30rpx;
		letter-spacing: 0.5rpx;
	}

	.image-gallery {
		display: flex;
		flex-direction: column;

		.gallery-image {
			width: 100%;
			margin-bottom: 24rpx;
			border-radius: 16rpx;
			background-color: #f8fafd;
			box-shadow: 0 4rpx 16rpx rgba(0, 10, 60, 0.05);
			transition: all 0.3s ease;

			&:hover {
				transform: scale(1.01);
				box-shadow: 0 8rpx 24rpx rgba(0, 10, 60, 0.08);
			}
		}
	}

	.footer-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		background-color: rgba(255, 255, 255, 0.95);
		box-shadow: 0 -8rpx 24rpx rgba(0, 10, 60, 0.08);
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);

		.action-btn {
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-weight: 600;
			letter-spacing: 1rpx;
			transition: all 0.3s;

			&:active {
				transform: scale(0.98);
			}

			&.like-btn {
				width: 200rpx;
				margin-right: 24rpx;
				background-color: #f8fafd;
				color: #64748b;
				border: 2rpx solid #e2e8f0;

				.iconfont {
					margin-right: 12rpx;

					&.icon-weizan {
						color: #94a3b8;
					}

					&.icon-zan {
						color: #ff4757;
					}
				}
			}

			&.call-btn {
				flex: 1;
				background: linear-gradient(135deg, #3a7bd5, #00d2ff);
				color: #fff;
				box-shadow: 0 10rpx 20rpx rgba(58, 123, 213, 0.3);

				.iconfont {
					margin-right: 12rpx;
				}
			}
		}
	}
</style>